<template>
  <!-- 定位的tip不对鼠标事件做出响应 -->
  <span
    style="pointer-events: none"
    class="py-1 px-0.5 text-xs text-black vertical-text absolute bg-gray-50 hidden tip"
    :class="`top-${top}`"
  >
    <slot />
  </span>
</template>

<script setup>
const $props = defineProps({
  top: {
    type: String,
    default: "10",
  },
});
</script>

<style lang="scss" scoped>
.tip {
  z-index: 100;
  white-space: nowrap;
  border: 1px solid #0f386c;
}
</style>
